<template>
    <div>
        <div class="search"> 
            <input 
            v-model="keyword" 
            class="search-input" 
            type="text"
            placeholder="输入城市名或拼音">
        </div>
        <div 
        class="search-content" 
        ref="search"
        v-show="keyword"
        >
            <ul>
                <li class="search-item border-bottom"
                v-for="item of list" 
                :key="item.id"
                @click="handleCityClick(item.name)"
                >{{item.name}}</li>
                <li class="search-item border-bottom" v-show="hasNoData">
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import Bscroll from "better-scroll"
import {mapMutations} from "vuex"
export default {
    name:'CitySearch',
    props:["cities"],
    // props:{alphabet:Object},
    data(){
        return{
            keyword:"",
            list:[],
            timer:null,
        }
    },
    computed:{
        hasNoData(){
            return !this.list.length
        }
    },
    methods:{
        handleCityClick(city){
            // 城市被点击，把当前城市换成点击的城市
            // this.$store.commit("changeCity",city)
            this.changeCity(city)
            // 城市点击，跳转到首页
            this.$router.push('/')
        },
        ...mapMutations(["changeCity"])
    },
    watch:{
        keyword () {
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.list=[]
                return
            }
            this.timer=setTimeout(()=>{
                const result=[]
                for (let key in this.cities){
                    this.cities[key].forEach((value)=>{
                        if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1)
                        result.push(value)
                    })
                }
                this.list=result
            },100)

        }
    },
    mounted(){
        this.scroll=new Bscroll(this.$refs.search)
    }
}
</script>
<style scoped lang="stylus">
@import "~styles/varibles.styl";
.search
    height .72rem
    padding .1rem 
    background $bgColor
    .search-input   
        box-sizing border-box
        width 100%
        line-height .62rem
        text-align center
        border-radius .06rem
        color #666
        padding 0 .1rem
.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.68rem
    left 0
    right 0
    bottom 0
    background #eee
    .search-item    
        line-height .62rem
        padding-left .2rem
        color #666
        background #fff
</style>
